<main class="container-xl">
    <div id="organizations-block" class="my-3 p-3 rounded shadow">
        <h6 class="border-bottom pb-2 mb-3">Organizations</h6>
        <div class="table-responsive-xl small">
            <table id="orgs-table" class="table table-sm table-striped table-hover">
                <thead>
                    <tr>
                        <th class="vw-org-details">Organization</th>
                        <th class="vw-users">Users</th>
                        <th class="vw-entries">Entries</th>
                        <th class="vw-attachments">Attachments</th>
                        <th class="vw-misc">Misc</th>
                        <th class="vw-actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each page_data}}
                    <tr>
                        <td>
                            <svg width="48" height="48" class="float-start me-2 rounded" data-jdenticon-value="{{id}}">
                            <div class="float-start">
                                <strong>{{name}}</strong>
                                <span class="me-2">({{billingEmail}})</span>
                                <span class="d-block">
                                    <span class="badge bg-success font-monospace">{{id}}</span>
                                </span>
                            </div>
                        </td>
                        <td>
                            <span class="d-block">{{user_count}}</span>
                        </td>
                        <td>
                            <span class="d-block">{{cipher_count}}</span>
                        </td>
                        <td>
                            <span class="d-block"><strong>Amount:</strong> {{attachment_count}}</span>
                            {{#if attachment_count}}
                            <span class="d-block"><strong>Size:</strong> {{attachment_size}}</span>
                            {{/if}}
                        </td>
                        <td>
                            <span class="d-block"><strong>Collections:</strong> {{collection_count}}</span>
                            <span class="d-block"><strong>Groups:</strong> {{group_count}}</span>
                            <span class="d-block"><strong>Events:</strong> {{event_count}}</span>
                        </td>
                        <td class="text-end px-1 small">
                            <button type="button" class="btn btn-sm btn-link p-0 border-0 float-right" vw-delete-organization data-vw-org-uuid="{{id}}" data-vw-org-name="{{name}}" data-vw-billing-email="{{billingEmail}}">Delete Organization</button><br>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>

        <div class="mt-3 clearfix">
            <button type="button" class="btn btn-sm btn-primary float-end" id="reload">Reload organizations</button>
        </div>
    </div>
</main>

<link rel="stylesheet" href="{{urlpath}}/vw_static/datatables.css" />
<script src="{{urlpath}}/vw_static/jquery-3.7.1.slim.js"></script>
<script src="{{urlpath}}/vw_static/datatables.js"></script>
<script src="{{urlpath}}/vw_static/admin_organizations.js"></script>
<script src="{{urlpath}}/vw_static/jdenticon-3.3.0.js"></script>
